<template>
  <div class="mainBody">
    <button @click="getData()">天气预报</button>
    <div>实时观测时间  : {{cc.dt}}</div>
    <div>气象站名称 : {{cc.station}}</div>
    <div>温度 : {{cc.t}} </div>
    <div>天气情况描述  :  {{cc.txt}}</div>
    <div>观测距离 : {{cc.dist}}</div>
    <div>紫外线指数 : {{cc.uv}}</div>
    <div>体感温度 : {{cc.tf}}</div>
    <div>风速 : {{cc.dt}}</div>
    <div>风向 : {{cc.wn}}</div>
    <div>相对湿度 : {{cc.rh}}</div>
    <div>可见度 : {{cc.v}}</div>
    <div>降水量 : {{cc.pr}}</div>
    <div>露点 : {{cc.td}}</div>
    <div>气压变化趋势 : {{cc.prestend}}</div>
    <div>可见度 : {{cc.v}}</div>
    <div>云层覆盖率 : {{cc.c}}</div>

    <div id="main0" style="width:1200px;height:400px"></div>
    <div id="main" style="width:1200px;height:400px"></div>
    <div id="main3" style="width:1200px;height:400px"></div>
    <div id="main2" style="width:1200px;height:400px"></div>
    <div id="main4" style="width:1200px;height:400px"></div>
    <div id="main5" style="width:1200px;height:400px"></div>
    <div id="main6" style="width:1200px;height:400px"></div>
    <div id="main7" style="width:1200px;height:400px"></div>
    <div id="main8" style="width:1200px;height:400px"></div>
    <div id="main9" style="width:1200px;height:400px"></div>
    <div id="main10" style="width:1200px;height:400px"></div>
    <div id="main11" style="width:1200px;height:400px"></div>
    <div id="main12" style="width:1200px;height:400px"></div>
    <div id="main13" style="width:1200px;height:400px"></div>
    <div id="main14" style="width:1200px;height:400px"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data(){
    return{
      cc:{},
      fch:[],
      fcd:[],
      t:[],
      dt:[],
      rh:[],
      pr:[],
      ws:[],
      wn:[],
      p:[],
      pp:[],
      c:[],
      tp:[],
      td:[],
      uv:[],
      v:[],
      upt:[],
      tf:[],
      fdt:[],
      ftn:[],
      ftx:[],
      ftxt:[],
      fpr:[],
      fwsx:[],
      fwn:[],
      fpp:[],
      ftp:[],
      frise:[],
      fset:[],
      fdl:[],
      fuv:[],
      fca:[],
      fp:[],
      frh_avg:[],
      fmp:[],
      fmrise:[],
      fmset:[],
      fnow:[]
    }


  },
  methods:{
    getData(){
      var _this = this
      this.$axios.get('http://47.94.173.1:9000/get_info')
      .then(function(res){
        _this.cc = res.data.cc
        _this.fch = res.data.fch
        _this.fcd = res.data.fcd
        for(let i = 0;i< _this.fch.length;i++){
          _this.t[i] = _this.fch[i].t
          _this.dt[i] = _this.fch[i].dt
          _this.rh[i] = _this.fch[i].rh
          _this.tf[i] = _this.fch[i].tf
          _this.pr[i] = _this.fch[i].pr
          _this.ws[i] = _this.fch[i].ws
          _this.p[i] = _this.fch[i].p
          _this.pp[i] = _this.fch[i].pp
          _this.c[i] = _this.fch[i].c
          _this.uv[i] = _this.fch[i].uv
          _this.v[i] = _this.fch[i].v
          _this.tp[i] = _this.fch[i].tp
          _this.td[i] = _this.fch[i].td
        }

        for(let i = 0;i< _this.fcd.length;i++){
          _this.fdt[i] = _this.fcd[i].dt;
          _this.ftn[i] = _this.fcd[i].tn;
          _this.ftx[i] = _this.fcd[i].tx;
          _this.ftxt[i] = _this.fcd[i].txt;
          _this.fwsx[i] = _this.fcd[i].wsx;
          _this.fwn[i] = _this.fcd[i].wn;
          _this.fpp[i] = _this.fcd[i].pp;
          _this.ftp[i] = _this.fcd[i].tp;
          _this.frise[i] = _this.fcd[i].rise;
          _this.fset[i] = _this.fcd[i].set;
          _this.fdl[i] = _this.fcd[i].dl;
          _this.fuv[i] = _this.fcd[i].uv;
          _this.fca[i] = _this.fcd[i].ca;
          _this.frh_avg[i] = _this.fcd[i].rh_avg;
          _this.fmp[i] = _this.fcd[i].mp;
          _this.fmrise[i] = _this.fcd[i].mrise;
          _this.fmset[i] = _this.fcd[i].mset;
          _this.fpr[i] = _this.fcd[i].pr;

        }
        for(let i = 0;i< _this.dt.length;i++){
          _this.dt[i] = _this.dt[i].substring(11,16)
        }
        for(let i = 0;i< _this.fdt.length;i++){
          _this.fnow[i] = _this.fdt[i] + " " +_this.ftxt
        }
        console.log(_this.fpr)

        var myChart20 = echarts.init(document.getElementById('main14'));
        var option20 ={
          title: {
            text: '未来一周最大降水'
          },
          xAxis: {
            data: _this.fdt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          series: [{
            data: _this.fpr,
            type: 'line'
          }]
        };
        myChart20.setOption(option20);

        var myChart19 = echarts.init(document.getElementById('main13'));
        var option19 = {
          // color: colors,
          title: {
            text: '未来一周日月状况',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: ['蒸发量',' 日出时间', '平均温度']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: _this.fdt
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '角度',
              min: 0,
              max: 1000,
              position: 'right',
              axisLine: {
                show: true,
                lineStyle: {
                  // color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} min'
              }
            },

            {
              type: 'value',
              name: '时长',
              min: 0,
              max: 1000,
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  // color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value} °'
              }
            }
          ],
          series: [

            {
              name: '日出时间',
              type: 'bar',
              data: _this.frise
            },
            {
              name: '日落时间',
              type: 'line',
              data: _this.fset
            },
            {
              name: '月相',
              type: 'line',

              data: _this.fmp
            },
            {
              name: '日照时长',
              type: 'bar',
              yAxisIndex: 1,
              data: _this.fdl
            },
            {
              name: '月升时间',
              type: 'line',
              data: _this.fmrise
            },
            {
              name: '月落时间',
              type: 'line',
              data: _this.fset
            }
          ]
        };
        myChart19.setOption(option19);


        var myChart18 = echarts.init(document.getElementById('main12'));
        var option18 = {
          title: {
            text: '未来一周日月状况',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['日出时间', '日落时间',"月升时间","月落时间","日照时长","月相"]
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _this.fdt
          },
          yAxis: [
            {
              type: 'value',
              name: '时间',
              min: 500,
              max: 1000,
              interval: 100,
              axisLabel: {
                formatter: '{value} m'
              }
            },
            {
              type: 'value',
              name: '月相',
              min: 0,
              max: 350,
              interval: 70,
              axisLabel: {
                formatter: '{value} DU'
              }
            }
          ],
          // yAxis: {
          //   type: 'value',
          //   axisLabel: {
          //     formatter: '{value} min'
          //   }
          // },
          series: [


            {
              name: '日出时间',
              type: 'line',
              data: _this.frise
            },
            {
              name: '日落时间',
              type: 'line',
              data: _this.fset
            },
            {
              name: '月升时间',
              type: 'line',
              data: _this.fmrise
            },
            {
              name: '月相',
              type: 'line',
              yAxisIndex: 1,
              data: _this.fmp
            },
            {
              name: '月落时间',
              type: 'line',
              data: _this.fset
            },
            {
              name: '日照时长',
              type: 'line',
              data: _this.fdl
            }
            ]

        };
        myChart18.setOption(option18);

        var myChart17 = echarts.init(document.getElementById('main11'));
        var option17 = {
          title: {
            text: '未来一周最大风速'
          },
          xAxis: {
            data: _this.fdt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} m/s'
            }
          },
          series: [{
            data: _this.fwsx,
            type: 'line'
          }]
        };
        myChart17.setOption(option17);
        var myChart16 = echarts.init(document.getElementById('main10'));
        var option16 = {
          title: {
            text: '未来一周天气状况',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['闪电概率', '降水概率',"平均云层覆盖率","全天平均相对湿度"]
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _this.fdt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '闪电概率',
              type: 'line',
              data: _this.ftp,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            },
            {
              name: '降水概率',
              type: 'line',
              data: _this.fpp,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            },
            {
              name: '平均云层覆盖率',
              type: 'line',
              data: _this.fca,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            },
            {
              name: '全天平均相对湿度',
              type: 'line',
              data: _this.frh_avg,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            }]

        };
        myChart16.setOption(option16);

        var myChart15 = echarts.init(document.getElementById('main9'));
        var option15 = {
          title: {
            text: '未来一周气温变化',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['最高气温', '最低气温']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _this.fdt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} °C'
            }
          },
          series: [
            {
              name: '最高气温',
              type: 'line',
              data: _this.ftn,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '最低气温',
              type: 'line',
              data: _this.ftx,
              markPoint: {
                data: [
                  {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'},
                  [{
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  }, {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: '最大值'
                    },
                    type: 'max',
                    name: '最高点'
                  }]
                ]
              }
            }
          ]
        };
        myChart15.setOption(option15);

        var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
            title: {
              text: '未来24小时相对湿度'
            },
            xAxis: {
              data: _this.dt
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              }
            },
            series: [{
             data: _this.rh,
              type: 'line'
            }]
        };
        myChart2.setOption(option2);
        var myChart4 = echarts.init(document.getElementById('main4'));
        var option4 = {
          title: {
            text: '未来24小时降水量'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} mm'
            }
          },
          series: [{
            data: _this.tf,
            type: 'line'
          }]
        };
        myChart4.setOption(option4);


        var myChart5 = echarts.init(document.getElementById('main5'));
        var option5 = {
          title: {
            text: '未来一天风速'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} m/s'
            }
          },
          series: [{
            data: _this.ws,
            type: 'line'
          }]
        };
        myChart5.setOption(option5);

        var myChart6 = echarts.init(document.getElementById('main6'));
        var option6 = {
          title: {
            text: '未来一天平均大气压'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} pa'
            }
          },
          series: [{
            data: _this.p,
            type: 'line'
          }]
        };
        myChart6.setOption(option6);

        var myChart11 = echarts.init(document.getElementById('main7'));
        var option11 = {
          title: {
            text: '未来一天紫外线指数'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: [{
            data: _this.uv,
            type: 'line'
          }]
        };
        myChart11.setOption(option11);

        var myChart12 = echarts.init(document.getElementById('main8'));
        var option12 = {
          title: {
            text: '未来一天可见度'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} m'
            }
          },
          series: [{
            data: _this.v,
            type: 'line'
          }]
        };
        myChart12.setOption(option12);

        var myChart13 = echarts.init(document.getElementById('main0'));
        var option13 = {
          title: {
            text: '24小时内温度变化',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['温度', '体感温度',"露点"]
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} °C'
            }
          },
          series: [
            {
              name: '温度',
              type: 'line',
              data: _this.t,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '体感温度',
              type: 'line',
              data: _this.tf,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '露点',
              type: 'line',
              data: _this.td,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]

        };
        myChart13.setOption(option13);

        var myChart14 = echarts.init(document.getElementById('main'));
        var option14 = {
          title: {
            text: '24小时天气预测',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['雷雨概率', '降水概率',"云层覆盖率"]
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '雷雨概率',
              type: 'line',
              data: _this.tp,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '降水概率',
              type: 'line',
              data: _this.tf,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '云层覆盖率',
              type: 'line',
              data: _this.c,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]

        };
        myChart14.setOption(option14);


      })
    }
  }
}
</script>

<style>
/* .mainBody{
  background-image: url('./assets/wallhaven-0wm38r.png');
  width: 1080px;
  height: 1080px;
} */
</style>
